<template>
	<div :style="{height:wH}">
		<h1></h1>
		<div id="nav">
			<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="" background-color="#545c64" text-color="#fff" active-text-color="dodgerblue">
				<el-menu-item class="logo">
					<h1><div class="wrapper">
					<div class="loader">
						<div class="timerWrap">
							<svg version="1.1" viewBox="131.623 175.5 120 160" preserveAspectRatio="xMinYMin meet" class="timer">
							<path fill="#FFFFFF" d="M212.922,255.45l36.855-64.492c1.742-3.069,1.742-6.836-0.037-9.896c-1.783-3.06-5.037-4.938-8.581-4.938
							h-99.158c-3.524,0-6.797,1.878-8.569,4.938c-1.773,3.06-1.792,6.827-0.03,9.896l36.846,64.491l-36.845,64.492
							c-1.762,3.068-1.743,6.836,0.03,9.896c1.772,3.061,5.044,4.938,8.569,4.938h99.158c3.544,0,6.798-1.878,8.581-4.938
							c1.779-3.06,1.779-6.827,0.037-9.896L212.922,255.45z M142.001,324.86l39.664-69.41l-39.664-69.41h99.158l-39.663,69.41
							l39.663,69.41H142.001z"/>
							</svg>
						</div>
					</div>
					</div>Manger</h1>
				</el-menu-item>
				<el-menu-item index="1"><router-link :to="{path: '/view'}">{{$t('message.home')}}</router-link></el-menu-item>
				<el-menu-item index="2"><router-link :to="{path: '/components/List3'}">{{$t('message.toggle')}}</router-link></el-menu-item>
				<el-menu-item index="3"><router-link :to="{path: '/components/List2'}">{{$t('message.welcome')}}</router-link></el-menu-item>
					<el-submenu index="4">
						<template slot="title"><el-badge  is-dot class="item">{{$t('message.login')}}</el-badge></template>
						<el-menu-item index="4-1">{{$t('message.register')}}</el-menu-item>
						<el-menu-item index="4-2">{{$t('message.appDownload')}}</el-menu-item>
						<el-menu-item index="4-3">{{$t('message.aboutUs')}}</el-menu-item>
					</el-submenu>
				<el-select v-model="value" placeholder="中文" @change='switchLang()' class="changeL">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-menu>
			<div class="line"></div>
		</div>
		<div class="leftContain" :style="{height:leftH}">
			<div class="left">
				<el-collapse accordion >
						<el-collapse-item name="1">
							<template slot="title">
								<i class="header-icon el-icon-menu"></i>{{$t('message.hint2')}}
							</template>
							<router-link :to="{path: '/components/List1'}">{{$t('message.hint2')}}</router-link>
						</el-collapse-item>
					<el-collapse-item name="2">
						<template slot="title">
							<i class="header-icon el-icon-document"></i>{{$t('message.hint3')}}
						</template>
						<router-link :to="{path: '/components/List2'}">{{$t('message.hint3')}}</router-link>
					</el-collapse-item>
					<el-collapse-item name="3">
						<template slot="title">
							<i class="header-icon el-icon-date"></i>{{$t('message.hint4')}}
						</template>
						<router-link :to="{path: '/components/List3'}">{{$t('message.hint4')}}</router-link>
					</el-collapse-item>
					<el-collapse-item name="4">
						<template slot="title">
							<i class="header-icon el-icon-mobile-phone"></i>{{$t('message.hint5')}}
						</template>
						<router-link :to="{path: '/components/List4'}">{{$t('message.hint5')}}</router-link>
					</el-collapse-item>
				</el-collapse>
			</div>
		</div>

		<div class="rightContain" :style="{height:rightH}">
			<div class="right">
				<el-breadcrumb separator-class="el-icon-arrow-right" separator="/view">
					<!--<el-breadcrumb-item :to="{ path: '/view' }">{{$t('message.index')}}</el-breadcrumb-item>-->
					<el-breadcrumb-item v-for="item in realList" :to="item.path">{{item.name}}</el-breadcrumb-item>
				</el-breadcrumb>
				<router-view/>
			</div>
		</div>

	</div>
</template>
<script>
	export default {
		name: 'home',
		init() {

		},
		created() {
			this.getRoutePath();
		},
		data() {
			return {
				realList: [],
				options: [{
					value: 'cn',
					label: '简体中文'
				}, {
					value: 'en',
					label: 'English'
				}],
				value: '',
				activeIndex: '1',
				wH: '',
				leftH: '',
				rightH: '',
				isShow: true
			}
		},
		mounted() {
			var navH = document.getElementById('nav').clientHeight;
			var windowH = window.innerHeight || document.documentElement.clientHeight;
			this.wH = windowH + "px";
			this.leftH = (windowH - navH) + 'px';
			this.rightH = (windowH - navH) + 'px';
		},
		methods: {
			getRoutePath() {
				this.realList = this.$route.meta.routeList;
				console.log(this.realList[0].name)
			},
			switchLang() {
				this.$i18n.locale = this.value;
			},
			showBg(e){
				console.log(e)
			}
		},
		beforeRouteEnter(to, from, next) {
			next((vm) => {
				vm.realList = to.meta.routeList;
			});
		},
		components: {

		},	
	}
</script>

<style>
	a {
		text-decoration: none;
		color: #fff;
	}	
	.changeL {
		float: right;
		width: 8%;
		margin: 10px 30px 0 0;
	}
	
	.leftContain {
		float: left;
		width: 15%;
		background: rgb(84, 92, 100);
		text-indent: 20px;
	}
	
	.rightContain {
		float: left;
		width: 85%;
		background: #ccc;
		overflow-y: scroll;
	}
	
	.right {
		padding: 20px;
		
	}
	
	#nav ul {
		border: none;
		box-shadow: 0px 3px 3px #000;
	}
	.el-badge__content.is-fixed {
	    top: 15px;	
    }
	.logo {
		margin-right: 60%!important;
	}
	
	.header-icon {
		margin-right: 10px;
	}
	
	.el-collapse-item__content a {
		display: inline-block;
		width: 80%;
		text-indent: 15%;
	}
	
	.router-link-active {
		color: dodgerblue;
	}
	
	.el-collapse-item__header,
	.el-collapse-item__wrap,
	.el-collapse-item__content {
		color: #fff;
		background: rgb(84, 92, 100);
	}
	
	.el-collapse-item__header,
	.el-collapse-item__wrap {
		border-bottom: 1px solid #51555f;
	}
	
	.el-col {
		border-radius: 4px;
	}
	
	.bg-purple-dark {
		background: #99a9bf;
	}
	
	.bg-purple {
		background: #d3dce6;
	}
	
	.bg-purple-light {
		background: #e5e9f2;
	}
	
	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}
	
	.el-breadcrumb__item {
		padding: 5px;
		background: dodgerblue;
		margin-right: 5px;
		border-radius: 3px;
	}
	
	.el-breadcrumb__item span {
		color: #fff!important;
	}
	/*logo动画*/
	
	.wrapper {
		width: 110px;
		max-width: 100%;
		margin: 0 auto;
	}
	
	aside {
		float: left;
		width: 50%;
		margin: 60px 0 40px;
	}
	
	aside h1 {
		margin-bottom: 0px;
	}
	
	aside .sup {
		font-style: italic;
		color: #999;
		margin-top: 4px;
	}
	
	@-webkit-keyframes timerRotate {
		0% {
			transform: rotateZ(0deg);
		}
		50% {
			transform: rotateZ(0deg);
		}
		100% {
			transform: rotateZ(-180deg);
		}
	}
	
	@-moz-keyframes timerRotate {
		0% {
			transform: rotateZ(0deg);
		}
		50% {
			transform: rotateZ(0deg);
		}
		100% {
			transform: rotateZ(-180deg);
		}
	}
	
	@-ms-keyframes timerRotate {
		0% {
			transform: rotateZ(0deg);
		}
		50% {
			transform: rotateZ(0deg);
		}
		100% {
			transform: rotateZ(-180deg);
		}
	}
	
	@keyframes timerRotate {
		0% {
			transform: rotateZ(0deg);
		}
		50% {
			transform: rotateZ(0deg);
		}
		100% {
			transform: rotateZ(-180deg);
		}
	}
	
	@-webkit-keyframes bottomFill {
		0% {
			border-bottom-width: 0px;
		}
		50% {
			border-bottom-width: 15px;
		}
		100% {
			border-bottom-width: 15px;
		}
	}
	
	@-moz-keyframes bottomFill {
		0% {
			border-bottom-width: 0px;
		}
		50% {
			border-bottom-width: 15px;
		}
		100% {
			border-bottom-width: 15px;
		}
	}
	
	@-ms-keyframes bottomFill {
		0% {
			border-bottom-width: 0px;
		}
		50% {
			border-bottom-width: 15px;
		}
		100% {
			border-bottom-width: 15px;
		}
	}
	
	@keyframes bottomFill {
		0% {
			border-bottom-width: 0px;
		}
		50% {
			border-bottom-width: 15px;
		}
		100% {
			border-bottom-width: 15px;
		}
	}
	
	@-webkit-keyframes topEmpty {
		0% {
			top: 19px;
			border-top-width: 60px;
			border-left-width: 35px;
			border-right-width: 35px;
		}
		50% {
			top: 80px;
			border-top-width: 0px;
			border-left-width: 0px;
			border-right-width: 0px;
		}
		100% {
			top: 80px;
			border-top-width: 0px;
			border-left-width: 0px;
			border-right-width: 0px;
		}
	}
	
	@-moz-keyframes topEmpty {
		0% {
			top: 19px;
			border-top-width: 60px;
			border-left-width: 35px;
			border-right-width: 35px;
		}
		50% {
			top: 80px;
			border-top-width: 0px;
			border-left-width: 0px;
			border-right-width: 0px;
		}
		100% {
			top: 80px;
			border-top-width: 0px;
			border-left-width: 0px;
			border-right-width: 0px;
		}
	}
	
	@-ms-keyframes topEmpty {
		0% {
			top: 19px;
			border-top-width: 60px;
			border-left-width: 35px;
			border-right-width: 35px;
		}
		50% {
			top: 80px;
			border-top-width: 0px;
			border-left-width: 0px;
			border-right-width: 0px;
		}
		100% {
			top: 80px;
			border-top-width: 0px;
			border-left-width: 0px;
			border-right-width: 0px;
		}
	}
	
	@keyframes topEmpty {
		0% {
			top: 15px;
			border-top-width: 15px;
			border-left-width: 10px;
			border-right-width: 10px;
		}
		50% {
			top: 30px;
			border-top-width: 0px;
			border-left-width: 0px;
			border-right-width: 0px;
		}
		100% {
			top: 30px;
			border-top-width: 0px;
			border-left-width: 0px;
			border-right-width: 0px;
		}
	}
	
	.loader {
		width: 50%;
		height: 60px;
		float: left;
		-webkit-transform: translateZ(0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-perspective: 1000;
	}
	
	.loader .timerWrap {
		position: relative;
		animation: timerRotate 1s infinite ease;
		-webkit-animation: timerRotate 1s infinite ease;
		-moz-animation: timerRotate 1s infinite ease;
		-ms-animation: timerRotate 1s infinite ease;
		position: relative;
		width: 35px;
		height: 61px;
		margin: auto;
		top: 0px;
	}
	
	.loader .timerWrap:before {
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 15px 10px 0 10px;
		border-color: #e08f24 transparent transparent transparent;
		position: absolute;
		top: 10px;
		left: 0;
		right: 0;
		margin: auto;
		animation: topEmpty 1s infinite ease;
		-webkit-animation: topEmpty 1s infinite ease;
		-moz-animation: topEmpty 1s infinite ease;
		-ms-animation: topEmpty 1s infinite ease;
	}
	
	.loader .timerWrap:after {
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 10px 15px 10px;
		border-color: transparent transparent #e08f24 transparent;
		position: absolute;
		bottom: 15px;
		left: 0;
		right: 0;
		margin: auto;
		animation: bottomFill 1s infinite ease;
		-webkit-animation: bottomFill 1s infinite ease;
		-moz-animation: bottomFill 1s infinite ease;
		-ms-animation: bottomFill 1s infinite ease;
	}
	
	.loader .timerWrap .timer {
		width: 120px;
		max-width: 100%;
		height: 55px;
		position: relative;
		top: 0;
		left: 0;
	}
	
	.loader .timerWrap .timer path {
		fill: #3f6b9d;
	}
	/**/
</style>